在前面 12 天的文章中已經依照各種使用分類介紹 Nuxt3 的結構和許多會用到的 API，今天來介紹非必要，但可以嘗試看看的 API，至於官方文件中有，但是沒介紹的就是真的不知道何時才會派上用場，所以不做介紹了。

NuxtLoadingIndicator

<NuxtLoadingIndicator> 是一個頁面切換時的動態效果，如果不想自己刻的話可以考慮使用這個元件，他的樣式是在頁面的最上方出現一個漸層變換的細長讀取條，也提供了一些 props 可以變換顏色。

使用方法是在 app.vue 中加入這個元件，官方範例如下：

<template>
  <NuxtLayout>
    <NuxtLoadingIndicator /> <!-- 放在 NuxtLayout 裡面 -->
    <NuxtPage />
  </NuxtLayout>
</template>

可用的 props：

• color: 修改讀取條的顏色
• height: 修改讀取條的高度(預設是 3px)
• duration: 修改顯示讀取條的時間(預設是 2000 毫秒)
• throttle: 修改觸發效果的間隔時間(預設是 200 毫秒)

如果想要基於這個元件做一些客製化的修改，可以參考 Github 中的原始碼

NuxtLink

<NuxtLink> 用來取代 vue-router 的 router-link 和 html 的 a 標籤，好處是會自動判斷前往的連結是內部或外部網址，再生成對應的標籤，使用方式和 a 標籤差不多。

官方範例如下：

<template>
  <!-- 外部 -->
  <NuxtLink to="https://nuxtjs.org">
    Nuxt website
  </NuxtLink>
  <!-- <a href="https://nuxtjs.org" rel="noopener noreferrer">...</a> -->
  
  <!-- 內部 -->
  <NuxtLink to="/about">
    About page
  </NuxtLink>
  <!-- <a href="/about">...</a> (+Vue Router & prefetching) -->
  
  <!-- 開新分頁 -->
  <NuxtLink to="https://twitter.com/nuxt_js" target="_blank">
    Nuxt Twitter
  </NuxtLink>
  <!-- <a href="https://twitter.com/nuxt_js" target="_blank" rel="noopener noreferrer">...</a> -->

  <!-- 修改安全性設置，rel 只有 noopener -->
  <NuxtLink to="https://discord.nuxtjs.org" target="_blank" rel="noopener">
    Nuxt Discord
  </NuxtLink>
  <!-- <a href="https://discord.nuxtjs.org" target="_blank" rel="noopener">...</a> -->

  <!-- 修改安全性設置，rel 都不要 -->
  <NuxtLink to="https://github.com/nuxt" no-rel>
    Nuxt GitHub
  </NuxtLink>
  <!-- <a href="https://github.com/nuxt">...</a> -->
</template>

Teleport

<Teleport> 是 Vue3 中的功能，可以把這個標籤內的內容指定渲染到特定的選取器或是 DOM 中，因為 Nuxt 包含了前、後端，使用上和純前端的 Vue 不太一樣，需要特別注意：

• SSR：在伺服器端渲染時期，只能將 Teleport 指向 body。

<template>
  <Teleport to="body">
    <div>Something...</div>
  </Teleport>
</template>

• CSR：在用戶端的時候，就可以像 Vue 一樣指定到其他的部位，但是需要寫在 <ClientOnly> 標籤內，只要寫在這個標籤中的內容都不會被 SSR。

<template>
  <ClientOnly>
    <Teleport to="#some-selector">
      <!-- content -->
    </Teleport>
  </ClientOnly>
</template>